<template>
    <div class="main-contain" style="width: 1020px;">
        <!-- 搜索筛选 -->
        <div class="page-title">
            <span>我发起的京剧活动</span>
            <!-- <el-button type="primary" plain icon="Plus" @click="handleAdd" style="float: right;">新增</el-button> -->
        </div><!--{{ needInfo.title }}-->
        <el-table v-loading="loading" :data="listData" border element-loading-text="拼命加载中">
            <el-table-column align="center" label="发布时间">
                <template #default="scope">
                    <div>{{ timestampToDayHM(scope.row.createdAt) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="exerciseType" align="center" label="活动名称">
                <template #default="scope">
                    <strong>{{ scope.row.title }}</strong>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="activityDate" label="活动开始时间">
                <template #default="scope">
                    <strong style="color: #1ea7d7;">{{ timestampToDayHM(scope.row.activityDate) }} </strong>
                </template>
            </el-table-column>
            <el-table-column prop="exerciseType" align="center" label="活动状态">
                <template #default="scope">
                    <el-tag type="danger" v-if="scope.row.status==1">招募中/进行中</el-tag>
                    <el-tag type="info" v-if="scope.row.status==2">已结束</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="favs" label="已报名人数">
            </el-table-column>
            <el-table-column align="center" label="操作">
                <template #default="scope">
                    <el-button type="danger" icon="Delete" @click="onDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination background layout="prev, pager, next" v-model:page-size="queryForm.pageSize"
            v-model:current-page="queryForm.pageNo" :total="total" @current-change="getInfo" />

        <!--支付对话框-->
        <el-dialog title="支付" v-model="payVisible" width="60%" :close-on-click-modal=false :show-close="false">
            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item label="订单编号">{{ orderInfo.orderCode }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">
                    ￥
                    <span style="font-size: 22px; color: #d4571d;">
                        {{ formatAmount(orderInfo.totalPrice) }}
                    </span>
                </el-descriptions-item>

            </el-descriptions>
            <div class="pay-btn">
                <div class="qr-code">
                    <img src="http://129.211.222.131:18080/images/pay.png" alt="" style="width: 200px;height: 200px;">
                </div>
                <el-button size="mini" icon="Close" type="info" @click="closeDialog()">取消</el-button>
                <el-button size="mini" icon="Check" type="primary" @click="onPay()">已支付</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加记录" v-model="editFormVisible" width="40%">
            <el-form label-width="120px" :model="editForm" ref="formRef">
                <el-form-item label="运动类型" prop="category">
                    <el-select v-model="editForm.exerciseType" placeholder="请选择类型">
                        <el-option v-for="item in categoryList" :key="item.id" 
                            :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item>
                <el-form-item label="运动时长" prop="name">
                    <el-input v-model="editForm.duration" type="number" placeholder="单位：分钟" />
                </el-form-item>
                <el-form-item label="消耗卡路里" prop="name">
                    <el-input v-model="editForm.caloriesBurned" type="number" placeholder="单位：千卡" />
                </el-form-item>
                <el-form-item label="详情">
                    <el-input size="small" v-model="editForm.remark" type="textarea" :row="3" placeholder="选填"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeCommDialog">取消</el-button>
                    <span style="padding: 0 5px;"></span>
                    <el-button type="primary" class="title" @click="onPublishComment()">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, nextTick, toRef } from "vue";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from "element-plus";
import { timestampToDayHM, timestampToHM, timestampToDate, formatAmount } from "@/utils/utils"
import { fileUploader } from '@/utils/upload.js'
import { useRouter, useRoute } from 'vue-router'

// 查询参数
const queryForm = reactive({
    deptName: "",
    pageNo: 1,
    pageSize: 10
});
const router = useRouter();
const route = useRoute();
// 列表内容数量
const total = ref(0);
// 列表是否加载
const loading = ref(true);
// 列表返回值
const listData = ref<any[]>([]);

// 表单实例
const formRef = ref();
const addressRef = ref();
// 是否打开弹出框
const open = ref(false);
const payVisible = ref(false);
const detailVisible = ref(false);
const addressFormopen = ref(false);
const editFormVisible = ref(false);
// 弹出框标题
const title = ref("");
const categoryList = ref<any[]>([]);
const orderInfo = ref();

// 表单验证
const rules = ref({
    deptName: [{ required: true, message: "规则名称不能为空", trigger: "blur" }],
});

// 订单表单数据
let editForm = toRef(
    reactive({
        exerciseType: '',
        duration: '',
        caloriesBurned: '',
        remark: ''
    })
)

/**
* 表单重置
*/
function reset() {
    editForm.value = {
        exerciseType: '',
        duration: '',
        caloriesBurned: '',
        remark: ''
    };
    nextTick(() => {
        formRef.value?.resetFields();
    });
}

function onShowPay(data: any) {
    console.log('EEEE', data)
    orderInfo.value = data
    payVisible.value = true
}

function closeDialog() {
    payVisible.value = false
}

function closeCommDialog() {
    editFormVisible.value = false
}

//支付，完成订单
const onPay = () => {
    let orderCode = orderInfo.value.orderCode
    baseService.get(`/api/order/pay/${orderCode}`).then((res) => {
        loading.value = false;
        ElMessage.success("支付成功");
        payVisible.value = false
        getInfo()
    }).catch(() => {
        ElMessage.error("支付异常");
        loading.value = false;
    });
}

function handleAdd() {
    reset()
    baseService.get("/admin/exercise/type/list/all", queryForm)
        .then((res) => {
            if (res.code === 200) {
                categoryList.value = res.data;
            } else {
                categoryList.value = [];
            }
        }).catch(() => {
        });
        editFormVisible.value = true
}

//获取记录列表
const getInfo = () => {
    baseService.post(`/api/activity/my/publish/list`, queryForm).then((res) => {
        console.log('获取订单列表：', res)
        listData.value = res.data.records;
        total.value = res.data.totalrecord;
        loading.value = false;
    }).catch(() => {
        loading.value = false;
    });
}

//删除
function onDelete(id: number) {
    ElMessageBox.confirm("确认要删除该活动吗？", "提示").then(() => {
      baseService.get(`/api/activity/delete/${id}`).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg);
          getInfo();
        } else {
          ElMessage.error(res.msg);
        }
      });
    });
}

const onPublishComment = () => {
    console.log('EEEEEEEEEE')
    baseService.post(`/api/record/exercise/save`, editForm.value).then((res) => {
        loading.value = false;
        ElMessage.success('记录成功');
        editFormVisible.value = false
        detailVisible.value = false
        getInfo()
    }).catch(() => {
        loading.value = false;
    });
}

getInfo();
</script>

<style scoped>
.page-title {
    font-size: 16px;
    font-weight: bold;
    color: #0038a7;
    padding-left: 5px;
    border-left: 3px solid #0038a7;
    margin: 15px 0;
    height: 30px;
    line-height: 30px;
}

.main-contain .el-button {
    margin-left: 2px;
}

.dtitle {
    font-size: 16px;
    margin: 10px 0;
    color: #666;
}

.introduction {
    margin: 15px 0;
}

.price {
    color: #d77f57;
}

.show-btn {
    text-align: center;
    margin-top: 100px;
    clear: both;
}

.qr-code,
.pay-btn {
    text-align: center;
}

.qr-code {
    margin: 12px 0;
}

.order-item {
    line-height: 36px;
    border-bottom: 1px solid #ebeef5;
    padding-top: 10px;
}

.main-contain .order-item .el-button {
    margin-left: 15px;
    vertical-align: top;
}

.green-button {
    background-color: #00aeec !important;
    border: 1px solid #00aeec;
    color: #fff !important;
    margin: 0 2px;
}

.green-button:HOVER {
    background-color: #29d !important;
    border: 1px solid #29d;
}

.orange-button {
    margin: 0 2px;
    background-color: #e2a388 !important;
    border: 1px solid #ccc;
    color: #fff !important;
}

.orange-button:HOVER {
    background-color: #e2a388 !important;
    border: 1px solid #fff;
}

.pra-info p {
    margin: 0;
}

.product-items {
    padding: 10px 0;
}

.product-items li {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

.product-items .pite {
    clear: both;
    height: 125px;
}

.product-items .pimg {
    float: left;
    width: 140px;
    overflow: hidden;
}

.product-items .pimg img {
    width: 100%;
    height: 120px;
}

.product-items .pdesc {
    float: left;
    padding: 4px 10px;
}

.product-items .pdesc p {
    margin: 0;
    padding: 2px 0;
}

.product-items .pdesc .subtitle {
    font-size: 12px;
}

.price {
    color: #F56C6C;
}
</style>